<template>
	<div class="page">
		<p class="title">基本用法</p>
		<gr-input v-model='var01'/>
		<p class="title">禁用状态</p>
		<gr-input v-model='var01' disabled />
		<p class="title">密码框</p>
		<gr-input v-model='var02' password />
		<p class="title">Label标签</p>
		<p>
			<gr-input v-model='var03' leftLabel="用户名" />
		</p>
		<p>
			<gr-input v-model='var04' password leftLabel="密码" />
		</p>
		<p>
			<gr-input v-model='var05' password rightLabel="密码" />
		</p>
		<p>
			<gr-input v-model='var06' rightLabel="用户名" />
		</p>
		<p class="title">嵌入图标</p>
		<gr-input v-model="var08" prefix-icon="search" />
		<gr-input v-model="var08" suffix-icon="zhongliang" />
		<gr-input v-model="var08" leftLabel="体重" suffix-icon="zhongliang" />
		<gr-input v-model="var08" rightLabel="体重" suffix-icon="zhongliang" />

		<p class="title">图标点击事件</p>
		<gr-input v-model="var09" suffix-icon="arrow-right-bold" @icon-click="test1" />
		
		<p class="title">material风格</p>
		<gr-input-material v-model="var10" />
		<p class="title">禁用状态(Material风格)</p>
		<gr-input-material v-model="var10" disabled />
		<p class="title">密码框(Material风格)</p>
		<gr-input-material v-model="var11" password label="密码" />
		<p class="title">Label标签(Material风格)</p>
		<gr-input-material v-model="var12" label="职位" />
		<p class="title">嵌入图标(Material风格)</p>
		<gr-input-material v-model="var13" prefix-icon="search" />
		<gr-input-material v-model="var14" label="搜索" prefix-icon="search" />
		<gr-input-material v-model="var15" suffix-icon="zhongliang" />
		<gr-input-material v-model="var16" label="体重" suffix-icon="zhongliang" />
		<p class="title">图标点击事件(Material风格)</p>
		<gr-input-material v-model="var17" suffix-icon="search" @icon-click="test1" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				var01: '',
				var02: '',
				var03: '',
				var04: '',
				var05: '',
				var06: '',
				var07: '',
				var08: '',
				var09: '',
				var10: '',
				var11: '',
				var12: '',
				var13: '',
				var14: '',
				var15: '',
				var16: '',
				var17: ''
			}
		},
		mounted() {
		},
		methods: {
			test1() {
				this.$toast.show('您点击了图标')
			}
		}
	}
</script>

<style lang="scss" scoped>
	p.title {
		margin: 30px 0 4px !important;
		padding-left: 10px !important;
		color: #ee8031;
	}
</style>
